<template>
  <div class="Myqua-lit">
    <p class="Service">
      <span class="Servi-e"><img src="../../../img/shouye/组 28.png" alt="" /></span>
      数据质量情况
      <span class="Servi-e"><img src="../../../img/shouye/组 27.png" alt="" /></span>
    </p>
    <p class="Servi-gon">共检测 <span style="  font-weight: 700;
  font-size: 32px;color:black">788</span> 条，昨日检测 <span style="  font-weight: 700;font-size: 32px;color:black">
        0</span>条</p>

    <!-- 数据质量数据 -->
    <div style=" width: 100%;height: 534px;">

      <div style="float: left;">
        <p style="font-weight: 700; line-height:50px;padding-left: 10px;;background-color: white;">近三十天数据质量评分占比</p>
        <div id="Pie-chart" style=" width:384px;height: 214px;background-color: white;">
        </div>

        <p style="font-weight: 700; line-height:50px;padding-left: 10px;margin-top: 20px;;background-color: white;">
          近三十天数据质量问题占比</p>
        <div id="Pie-chart2" style=" width:384px;height: 214px;background-color: white;">
        </div>
      </div>


      <div style=" width: 792px;height: 550px;float: right;background-color: #fff;">
        <div style="padding: 0 10px 10px  10px ;">
          <p style="font-weight: 700; line-height:50px;">
            数据质量排行 <span class="Interf">更多>> </span>
          </p>
          <el-table :data="NumberData" stripe border style="width: 100% "
            :header-cell-style="{ background: '#C4DCFE', color: '#606266' }" :height="tableH">
            <el-table-column prop="eria" label="序号" width="100" 
             align="center">
            </el-table-column>
            <el-table-column prop="Service" label="资源名称" width="230"  align="center">
            </el-table-column>
            <el-table-column prop="ofcalls" width="150" label="数据来源"  align="center">
            </el-table-column>
            <el-table-column prop="services" label="质量评分"  align="center">
            </el-table-column>
            <el-table-column prop="servic" label="检测时间"  align="center">
            </el-table-column>
          </el-table>
        </div>

      </div>

    </div>


  </div>
</template>

<script>

import * as echarts from "echarts";
export default {

  data() {
    return {
      NumberData: [
        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2023年02月05日'
        },
        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2023年02月04日'
        },

        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2023年02月03日'
        },
        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2023年02月02日'
        },
        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2023年02月01日'
        },
        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2022年01月31日'
        },
        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2022年01月30日'
        },
        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2022年01月29日'
        },
        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2022年01月28日'
        },
        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2022年01月27日'
        },
        {
          eria: "01",
          Service: "尾矿库信息",
          ofcalls: "生态环境部",
          services: "99.2",
          servic: '2022年01月26日'
        },

      ],
    };
  },

  mounted() {
    this.initEchart();
  },

  methods: {
    initEchart() {
      var myecart = echarts.init(document.getElementById("Pie-chart"));
      myecart.setOption({

        series: [
          {
            name: '',
            type: 'pie',
            clockWise: false,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            radius: '60%', //边框大小
            color: '#fff',
            center: ['50%', '50%'],
            data: [{
              value: 20,
              itemStyle: {
                // borderColor: '#fff',
                borderWidth: 40,
                shadowBlur: 30, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
                shadowOffsetX: 0, // 阴影水平方向上的偏移距离
                shadowOffsetY: 0,
                shadowColor: '#5B8FF9' // 阴影颜色

              }
            }]
          },
          {
            name: '',
            type: 'pie',
            center: ['50%', '50%'],
            radius: [20, 50],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 0
            },
            label: {
              position: "center",
              normal: {
                show: true,
                fontSize: 16,
                lineHeight:20,
                formatter: ["  {a|{b}\n{d}%}"].join(""), //用\n来换行
                rich: {
                  a: {
                    left: 20,
                    padding: [-35, -70, 0, -60],  //位置按需要调整
                  },
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 30,
                length2: 60,
                lineStyle: {
                  width: 1
                }
              }
            },
            data: [
              { value: 99.7, name: '范围：59以下 占比' },
              { value: 0, name: '范围：69-60 占比' },
              { value: 0, name: '范围：100-90 占比' },
              { value: 0, name: '范围：79-70 占比' },
            ]
          }
        ]
      });

      var myecart2 = echarts.init(document.getElementById("Pie-chart2"));
      myecart2.setOption({

        series: [
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: '60%', //边框大小
            color: '#fff',
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            center: ['50%', '50%'],
            data: [{
              value: 20,
              itemStyle: {
                // borderColor: '#fff',
                borderWidth: 40,
                shadowBlur: 30, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
                shadowOffsetX: 0, // 阴影水平方向上的偏移距离
                shadowOffsetY: 0,
                shadowColor: '#5B8FF9' // 阴影颜色

              }
            }]
          },
          {
            name: 'Nightingale Chart',
            type: 'pie',
            center: ['50%', '50%'],
            radius: [20, 80],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 0
            },
            label: {
              position: "center",
              normal: {
                show: true,
                fontSize: 16,
                lineHeight:20,
                formatter: ["  {a|{b}\n{d}%}"].join(""), //用\n来换行
                rich: {
                  a: {
                    left: 20,
                    padding: [-35, -70, 0, -60],  //位置按需要调整
                  },
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 30,
                length2: 60,
                lineStyle: {
                  width: 1
                }
              }
            },
            data: [
              { value: 0, name: '准确性' },
              { value: 0, name: '一致性' },
              { value: 0, name: '完整性' },
              { value: 0, name: '及时性' },
              { value: 0, name: '有效性' },
              { value: 0, name: '唯一性' },
            ]
          }
        ]
      });

    },


  },

}
</script>

<style>
.Myqua-lit {
  width: 1200px;
  margin: 0 auto;
  background: #F2F8FF;
}

.Servi-gon {
  text-align: center;
  line-height: 80px;
  color: #505E77;

}
</style>